
.page-member-center {
	background: #f9f9f9;
	margin-bottom: -40px;
	padding-bottom: 40px;
	min-height: 82vh;
	.page-member-head {
		background: #fff;
		width: 100%;
		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.05);
		.content {
			display: flex;
			align-items: center;
			height: 50px;
			padding: 20px 0;
			.logo {
				display: block;
				height: 50px;
				width: 146px;
				background: url(@/assets/images/member-pic/member-logo.png) no-repeat center;
			}
			.nav {
				flex: 1;
				display: flex;
				margin: 0 80px;
				.item {
					padding: 0 25px;
					font-size: 14px;
					line-height: 50px;
					&:hover {
						color: #e1251b;
					}
				}
				.item.active {
					color: #e1251b;
				}
			}
			.user {
				position: relative;
				display: flex;
				align-items: center;
				.user-box {
					display: flex;
					align-items: center;
					cursor: pointer;
					&:hover {
						.grow-date {
							display: block;
						}
					}
				}
				.img {
					width: 35px;
					height: 35px;
					font-size: 0;
					img {
						width: 100%;
						height: 100%;
						border-radius: 50%;
						box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08);
					}
				}
				.name {
					margin: 0 20px 0 15px;
					max-width: 80px;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.out {
					color: #999;
					margin-right: 10px;
					&:hover {
						color: #e1251b;
					}
				}
				.grow-date {
					position: absolute;
					top: 50px;
					right: 0;
					background: #fff;
					padding: 6px 15px 15px;
					border-radius: 5px;
					box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
					min-height: 30px;
					display: none;
					&::before {
						position: absolute;
						right: 27%;
						top: -14px;
						display: block;
						width: 0;
						height: 0;
						content: ' ';
						border: 7px solid transparent;
						border-bottom: 7px solid #eee;
					}
					&::after {
						position: absolute;
						right: 27%;
						top: -13px;
						display: block;
						width: 0;
						height: 0;
						content: ' ';
						border: 7px solid transparent;
						border-bottom: 7px solid #fff;
					}
					.growth-box {
						display: flex;
						margin-top: 10px;
						align-items: center;
						.text {
							width: 50px;
							white-space: nowrap;
							font-family: arial,sans-serif;
						}
						.growth {
							flex: 1;
							min-width: 110px;
							margin-left: 5px;
							height: 12px;
							background: #f0f2f5;
							border-radius: 12px;
							text-align: center;
							position: relative;
							.number {
								font-family: arial,sans-serif;
								display: block;
								height: 12px;
								line-height: 12px;
								position: relative;
							}
							.percent {
								height: 12px;
								border-radius: 12px 0 0 12px;
								background: #e6d0b7;
								position: absolute;
								left: 0;
							}
						}
						.rank {
							font-family: arial,sans-serif;
							height: 14px;
							line-height: 14px;
							padding: 0 3px;
							margin-left: 10px;
							color: #fff;
							background: -webkit-linear-gradient(left, #edae76, #863e00);
							background: -o-linear-gradient(right, #edae76, #863e00);
							background: -moz-linear-gradient(right, #edae76, #863e00);
							background: linear-gradient(to right, #edae76, #863e00);
							white-space: nowrap;
							border-radius: 2px;
						}
					}
					.date {
						display: flex;
						margin-top: 10px;
						align-items: center;
						width: 200px;
						.text {
							width: 50px;
							white-space: nowrap;
							font-family: arial,sans-serif;
						}
						.time {
							margin-left: 5px;
							font-family: arial,sans-serif;
						}
					}
				}
				.en {
					.date {
						width: 300px;
						.text {
							width: 100px;
						}
					}
					.growth-box {
						.text {
							width: 100px;
						}
					}
				}
			}
		}
	}
	.member-banner {
		height: 380px;
		margin-top: -20px;
		background: url(@/assets/images/member-pic/member-banner.jpg) no-repeat center;
		.banner-box {
			width: 1200px;
			height: 100%;
			margin: auto;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			.login-box {
				background: #fff;
				padding: 20px;
				width: 270px;
				height: 290px;
				border-radius: 3px;
				box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08);
				.head-portrait {
					width: 60px;
					height: 60px;
					font-size: 0;
					margin: auto;
					img {
						width: 100%;
						height: 100%;
						border-radius: 50%;
						box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08);
					}
				}
				.user-name {
					text-align: center;
					margin-top: 10px;
					max-width: 270px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					.rank {
						font-family: arial,sans-serif;
						width: 42px;
						height: 14px;
						line-height: 14px;
						padding: 0 3px;
						margin: auto;
						margin-top: 10px;
						color: #fff;
						background: -webkit-linear-gradient(left, #edae76, #863e00);
						background: -o-linear-gradient(right, #edae76, #863e00);
						background: -moz-linear-gradient(right, #edae76, #863e00);
						background: linear-gradient(to right, #edae76, #863e00);
						border-radius: 2px;
					}
				}
				.user-name.red {
					color: #e1251b;
				}
				.btn {
					display: block;
					background: #e1251b;
					color: #fff;
					width: 150px;
					height: 36px;
					line-height: 36px;
					text-align: center;
					border-radius: 36px;
					font-size: 12px;
					margin: 20px auto 35px;
					&:hover {
						opacity: 0.9;
					}
				}
				.growth-box {
					display: flex;
					margin-top: 10px;
					align-items: center;
					.growth {
						flex: 1;
						max-width: 138px;
						margin-left: 5px;
						height: 12px;
						background: #f0f2f5;
						border-radius: 12px;
						text-align: center;
						position: relative;
						overflow: hidden;
						.number {
							font-family: arial,sans-serif;
							display: block;
							height: 12px;
							line-height: 12px;
							position: relative;
						}
						.percent {
							height: 12px;
							border-radius: 12px 0 0 12px;
							background: #e6d0b7;
							position: absolute;
							left: 0;
						}
					}
					.rank {
						font-family: arial,sans-serif;
						height: 14px;
						line-height: 14px;
						padding: 0 3px;
						margin-left: 10px;
						color: #fff;
						background: -webkit-linear-gradient(left, #edae76, #863e00);
						background: -o-linear-gradient(right, #edae76, #863e00);
						background: -moz-linear-gradient(right, #edae76, #863e00);
						background: linear-gradient(to right, #edae76, #863e00);
						border-radius: 2px;
					}
				}
				.shortcut {
					margin-top: 20px;
					display: flex;
					justify-content: space-around;
					text-align: center;
					.item {
						.icon {
							display: block;
							margin: auto;
							width: 50px;
							height: 50px;
							font-size: 0;
							-moz-transition: all 0.2s;
							-webkit-transition: all 0.2s;
							-o-transition: all 0.2s;
							transition: all 0.2s;
							img {
								width: 100%;
								height: 100%;
							}
						}
						&:hover {
							.icon {
								opacity: 0.8;
							}
						}
						.text {
							display: block;
							margin-top: 5px;
						}
					}
				}
			}
		}
	}
	.member-tit {
		margin-top: 40px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.text {
			position: relative;
			font-size: 16px;
			padding-left: 10px;
			&::before {
				position: absolute;
				left: 0;
				top: 20%;
				bottom: 18%;
				display: block;
				width: 3px;
				height: auto;
				content: ' ';
				border-radius: 3px;
				background: #e1251b;
			}
		}
		.more {
			display: flex;
			color: #999;
			.arr {
				font-family: Consolas,sans-serif;
				margin-left: 5px;
			}
			&:hover {
				color: #e1251b;
			}
		}
	}
	.member-equity {
		.con {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20px;
			.item {
				background: #fff;
				width: 285px;
				height: 130px;
				display: flex;
				align-items: center;
				box-sizing: border-box;
				padding: 20px;
				.icon {
					width: 80px;
					height: 80px;
					font-size: 0;
					margin-left: 5px;
					border-radius: 50%;
					box-shadow: 0 5px 8px rgba(243, 188, 141, 0.3);
					img {
						width: 100%;
						height: 100%;
					}
				}
				.text-box {
					margin-left: 25px;
					width: 140px;
					.text {
						font-size: 14px;
						font-weight: 600;
					}
					.des {
						color: #999;
						margin-top: 15px;
					}
				}
			}
		}
	}
	.sign-mission {
		.tit-box {
			display: flex;
			justify-content: space-between;
			.mission-tit {
				width: 400px;
			}
		}
		.con {
			display: flex;
			margin-top: 20px;
			.sign {
				flex: 1;
				background: #fff;
				display: flex;
				justify-content: space-around;
				align-items: center;
				padding: 20px;
				.item {
					text-align: center;
					font-size: 14px;
					.number {
						border: 1px solid #e1251b;
						width: 58px;
						height: 58px;
						line-height: 58px;
						border-radius: 50%;
						color: #e1251b;
						font-family: arial,sans-serif;
						cursor: pointer;
					}
					.number.active {
						color: #fff;
						border-color: #e1251b;
						background: #e1251b;
					}
					.text {
						margin-top: 15px;
					}
				}
			}
			.mission {
				width: 360px;
				padding: 20px;
				margin-left: 20px;
				background: #fff;
				.item {
					display: flex;
					align-items: center;
					margin-top: 15px;
					padding-top: 15px;
					border-top: 1px solid #eee;
					&:first-child {
						margin-top: 0;
						padding-top: 0;
						border: 0;
					}
					.text-box {
						flex: 1;
						margin-right: 20px;
						.text {
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							text-overflow: ellipsis;
							font-size: 14px;
						}
						.des {
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							text-overflow: ellipsis;
							font-size: 12px;
							color: #999;
							margin-top: 10px;
						}
					}
					.btn {
						padding: 5px 18px;
						background: #e1251b;
						color: #fff;
						border-radius: 30px;
						&:hover {
							opacity: 0.9;
						}
					}
					.btn.default {
						background: #ccc;
						cursor: not-allowed;
						&:hover {
							opacity: 1;
						}
					}
				}
			}
		}
	}
	.goods-list.integral-list {
		margin-top: 20px;
		padding: 0 20px 20px;
		background: #fff;
		.list-con {
			.item {
				width: 275px;
				.goods-img {
					width: 275px;
					height: 275px;
					line-height: 275px;
				}
				.goods-msg {
					.goods-price {
						.icon {
							width: 14px;
							height: 14px;
							font-size: 0;
							margin-right: 5px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.integral-price {
							color: #e1251b;
							font-family: arial,sans-serif;
						}
						.add {
							margin: 0 5px;
							color: #e1251b;
							font-family: arial,sans-serif;
						}
					}
					.old-price {
						margin-top: 3px;
						color: #999;
						text-decoration: line-through;
					}
				}
			}
		}
	}
  .grow-date {
    .rank {
      font-family: arial,sans-serif;
      height: 14px;
      line-height: 14px;
      padding: 0 3px;
      color: #fff;
      background: linear-gradient(to right, #edae76, #863e00);
      border-radius: 2px;
      width: auto;
    }
  }
}
